<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><%= live_redirect gettext("Home"), to: "/" %></li>
    <li class="is-active"><%= live_redirect gettext("Geo-Fences"), to: "/geo-fences" %></li>
  </ul>
</nav>

<%= live_redirect raw("""
      <span>#{gettext("Create")}</span>
      <span class="icon">
        <span class="mdi mdi-plus"></span>
      </span>
      """) ,
      to: Routes.live_path(@socket, TeslaMateWeb.GeoFenceLive.Form),
      class: "button is-info is-small is-rounded is-pulled-right mb-4"
%>

<table class="table is-fullwidth">
  <thead class="is-hidden-mobile">
    <tr>
      <th><%= gettext("Name") %></th>
      <th><%= gettext("Position") %></th>
      <th><%= gettext("Radius") %></th>
      <th></th>
    </tr>
  </thead>
  <tbody style="font-variant-numeric: tabular-nums;">
<%= for geofence <- @geofences do %>
    <tr>
      <td class="has-text-weight-medium is-truncated" style="min-width: 0; max-width: 180px"><%= geofence.name %></td>
      <td class="is-hidden-mobile has-text-weight-light" style="width: 30%"><%= geofence.latitude %>, <%= geofence.longitude %></td>
      <td class="is-hidden-mobile has-text-weight-light" style="width: 10%"><%=
          case @unit_of_length do
            :ft -> geofence.radius |> Convert.m_to_ft() |> round()
            :m -> geofence.radius |> round()
          end
        %> <%= @unit_of_length %></td>
      <td>
        <div class="field is-grouped is-pulled-right">
          <p class="control">
            <%= live_redirect raw("<span class='icon'><span class='mdi mdi-square-edit-outline'></span></span>"),
                  to: Routes.live_path(@socket, TeslaMateWeb.GeoFenceLive.Form, geofence, []),
                  class: "button is-info is-small is-inverted is-light"
            %>
          </p>
          <p class="control">
            <%= link raw("<span class='icon'><span class='mdi mdi-trash-can'></span></span>"),
                  to: "#", phx_hook: "ConfirmGeoFenceDeletion",
                  data: [
                    id: geofence.id,
                    msg: gettext("Delete '%{geo_fence}'?", geo_fence: geofence.name)
                  ],
                  type: "button",
                  id: "delete_#{geofence.id}",
                  class: "button is-danger is-small is-inverted is-light"
            %>
          </p>
        </div>
      </td>
    </tr>
<% end %>
  </tbody>
</table>
